<template>
    <div class="project-infoset">
        <el-card shadow="never">
            <div slot="header">
                <span class="t-b-name">基本信息</span>
                <el-button class="btn" type="text" @click="handleEdit"><i class="iconfont icon-bianji"></i>{{isEdit?'保存':'修改'}}</el-button>
            </div>
            <el-form :class="isEdit?'baseInfo-form-update':'baseInfo-form-save'" ref="form" :model="item" :rules="rules" label-width="96px" :hide-required-asterisk="true">
                <el-form-item label="项目负责人：">{{item.ownerUserName}}</el-form-item>
                <el-form-item label="创建日期：">{{item.createTime}}</el-form-item>
                <el-form-item label="项目名称：" prop="projectName">
                    <span v-if="!isEdit">{{item.projectName}}</span>
                    <el-input v-else clearable placeholder="请输入项目名称" v-model="item.projectName"></el-input>
                </el-form-item>
                <el-form-item label="项目代码：">{{item.projectCode}}</el-form-item>
                <el-form-item label="项目ID：">{{item.projectId}}</el-form-item>
                <el-form-item label="项目描述：">
                    <span class="project-desc" v-if="!isEdit">{{item.description}}</span>
                    <el-input v-else :maxlength="100" type="textarea" :rows="5" clearable placeholder="请输入项目描述" v-model="item.description"></el-input>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow="never" class="clearFix">
            <div slot="header">
                <span class="t-b-name">删除项目</span>
            </div>
            <i class="iconfont icon-shanchuxiangmu"></i>
            <span class="text-shanchu">项目删除后就再也不可恢复了，请谨慎操作！</span>
            <el-button class="btn" type="danger" plain @click="handleDel">删除</el-button>
        </el-card>
        <el-card shadow="never" class="clearFix">
            <div slot="header">
                <span class="t-b-name">转让项目</span>
            </div>
            <i class="iconfont icon-zhuanrangxiangmu"></i>
            <span class="text-zhuanrang">项目转让后就再也不可恢复了，请谨慎操作！</span>
            <el-button class="btn" type="warning" plain @click="handleGive">转让</el-button>
        </el-card>
        <give-dialog v-if="giveData.show" :giveData="giveData" @save="handleGiveSave"></give-dialog>
        <del-dialog v-if="delData.show" :delData="delData" @save="handleDelSave"></del-dialog>
    </div>
</template>
<script>
import GiveDialog from './GiveDialog'
import DelDialog from './DelDialog'
export default {
    name: 'InfoSet',
    components: { GiveDialog, DelDialog },
    data () {
        const projectId = this.$route.params.id
        var validateNameLength = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入项目名称'))
            } else if (value !== '') {
                var result = 0
                for (let i = 0; i < value.length; i++) {
                    result += 1
                    // 检测是否是中文，若是中文则占两个字符
                    if (value.charCodeAt(i) > 256) {
                        result += 1
                    }
                }
                if (result > 30 || result < 3) {
                    callback(new Error('长度在3-30个字符，只包含中文、字母、下划线和数字个字节长度'))
                } else {
                    callback()
                }
            }
        }
        return {
            projectId,
            username: JSON.parse(localStorage.getItem('USER')).username,
            giveData: {
                show: false,
                title: '转让项目',
                value: '',
                list: []
            },
            delData: {
                show: false,
                title: '删除项目',
                value: ''
            },
            item: { ownerRealName: null, createTime: null, projectName: null, description: null },
            isEdit: false,
            rules: {
                projectName: [
                    {
                        required: true,
                        validator: validateNameLength,
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            this.$post('/project/queryById', { projectId: this.projectId }).then(res => {
                if (res) {
                    this.item = res
                }
            })
        },
        handleDel () {
            this.delData.show = true
            this.delData.value = this.item.projectName
        },
        handleGive () {
            this.getGiveList()
        },
        handleGiveSave () {
            const params = {
                dstOwner: this.giveData.value,
                projectId: this.projectId
            }
            this.$post('/member/changeProjectOwner', params).then(res => {
                if (res) {
                    this.giveData.show = false
                    this.$message.success('转让项目成功')
                    this.$router.push('/projects')
                }
            })
        },
        getGiveList () {
            const params = {
                pageNum: -1,
                projectId: this.projectId
            }
            this.$post('/member/queryProjectMembers', params).then(res => {
                if (res) {
                    this.giveData.list = res.rows.filter(v => v.username !== this.username)
                    this.giveData.show = true
                }
            })
        },
        handleDelSave () {
            const params = {
                projectId: this.projectId
            }
            this.$post('/project/delete', params).then(res => {
                if (res) {
                    this.$message.success('删除成功')
                    this.delData.show = false
                    this.$router.push('/projects')
                }
            })
        },
        updated () {
            const { description, projectName, cacheExpireDays } = this.item
            const params = {
                cacheExpireDays,
                projectDesc: description,
                projectId: this.projectId,
                projectName
            }
            this.$post('/project/update', params).then(res => {
                if (res) {
                    this.$message.success('保存成功')
                    this.isEdit = false
                    this.init()
                }
            })
        },
        handleEdit () {
            if (this.isEdit) {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.updated()
                    } else {
                        return false
                    }
                })
            } else {
                this.isEdit = true
            }
        }
    }
}
</script>
<style lang="less">
    .project-infoset {
        overflow-x: hidden;
        overflow-y: auto;
        font-family: 'PingFangSC-Regular';
        .baseInfo-form-save {
            .el-form-item {
                margin-bottom: 0 !important;
            }
        }
        .baseInfo-form-update {
            .el-form-item {
                margin-bottom: 6px !important;
            }
        }
        .project-desc {
            display: inline-block;
            width: 50%;
            white-space: normal;
        }
        .el-button {
            min-width: inherit !important;
        }
        .is-plain {
            background: #fff;
        }
        .el-card {
            border: 0;
            margin-bottom: 16px;
            .el-card__header {
                padding: 0;
                border-bottom: 0;
                & > div {
                    display: flex;
                    align-items: center;
                }
                .el-button {
                    span {
                        display: flex;
                        align-items: center;
                        .icon-bianji {
                            color: #3286C7;
                            margin: 0 4px 0 8px;
                        }
                    }
                }
            }
            .el-card__body {
                padding: 0 13px 8px 13px;
                .el-form-item {
                    // margin-bottom: 5px;
                    .el-form-item__label {
                        color: rgba(51, 51, 51, .65);
                    }
                }
            }
        }
        .clearFix {
            border-radius: 0;
            .el-card__body {
                padding: 13px !important;
                display: flex;
                align-items: center;
            }
            .icon-shanchuxiangmu {
                color: #FF0000;
                font-size: 20px;
            }
            .icon-zhuanrangxiangmu {
                color: #FFA800;
                font-size: 20px;
            }
            .text-shanchu, .text-zhuanrang {
                display: inline-block;
                margin: 0 16px 0 9px;
                font-size: 14px;
            }
        }
    }
</style>
